<!-- <div id="title" class="row">
  <h1>{{ctrl.queue}} <span translate lib="web">workitems</span></h1>
</div> -->
<div class="row">
  <div class="col-md-4">
    <div className="btn-group-justified">
      <div class="btn-group" role="group">
        <select id="menucollections" ng-model="ctrl.queue"
          ng-options="item.name as item.name for item in ctrl.workitemqueues" ng-change="ctrl.SelectWorkitemqueues()">
        </select>
      </div>

    </div>
  </div>

  <div class="col-md-8 text-right">
    <em class="fas fa-cog fa-spin" ng-show="ctrl.loading==true" title="Hang on, loading data"></em>
    <!-- <em class="fas fa-cog" ng-show="ctrl.loading!=true" title="I spin, while loading data"></em> -->
    <a class="btn" href ng-click="ctrl.loadData()" title="Reload current data">
      <span translate lib="web">reload</span>
    </a>
    <a class="btn" href ng-click="ctrl.SetState('New')" ng-class="{'btn-primary': ctrl.basequery['state'] == 'new'}"
      title="Show only new Workitemss">
      <span translate lib="web">new</span>
    </a>
    <a class="btn" href ng-click="ctrl.SetState('Successful')" title="Show only successfully completed Workitems"
      ng-class="{'btn-primary': ctrl.basequery['state'] == 'successful'}">
      <span translate lib="web">successful</span>
    </a>
    <a class="btn " href ng-click="ctrl.SetState('Failed')" title="Show only failed Workitems"
      ng-class="{'btn-primary': ctrl.basequery['state'] == 'failed'}">
      <span translate lib="web">failed</span>
    </a>
    <a class="btn" href ng-click="ctrl.SetState('Processing')" title="Show only Workitems currently being processd"
      ng-class="{'btn-primary': ctrl.basequery['state'] == 'processing'}">
      <span translate lib="web">processing</span>
    </a>
    <!-- <a class="btn" href ng-click="ctrl.SetState('Retry')" ng-class="{'btn-primary': ctrl.basequery['state'] == 'retry'}">
      Retry
    </a> -->
    <a class="btn" ng-href="#/Workitems" ng-show="ctrl.queue != ''" ng-click="ctrl.SetState('')"
      title="clear filters and show all status and Workitem queues">
      <span translate lib="web">all</span>
    </a>
    <a ng-href="#/Workitem" class="btn btn-info"
      title="Add new Workitem to selected queue"><em class="fas fa-plus"></em></a>
  </div>
</div>

<div style="border-collapse: collapse; table-layout: fixed;" ng-show="ctrl.errormessage != ''"" class=" alert alert-danger" role="alert">{{ctrl.errormessage}}</div>
<table id="table1" class="table table-striped" when-scrolled="ctrl.more()" style="width: 100%;">
  <thead class="thead-dark">
    <tr>
      <th ng-click="ctrl.ToggleOrder('name')"><strong translate lib="web">name</strong></th>
      <th class="w-100" ng-click="ctrl.ToggleOrder('state')"><strong translate lib="web">state</strong></th>
      <th class="w-100" ng-click="ctrl.ToggleOrder('retries')"><strong translate lib="web">retries</strong></th>
      <th class="w-100" ng-click="ctrl.ToggleOrder('priority')"><strong translate lib="web">priority</strong></th>
      <th class="w-100" ng-click="ctrl.ToggleOrder('wiq')" ng-show="ctrl.queue == ''"><strong translate lib="web">queue</strong></th>
      <th class="w-100" ng-click="ctrl.ToggleOrder('lastrun')"><strong translate lib="web">lastrun</strong></th>
      <th class="w-100" ng-click="ctrl.ToggleOrder('nextrun')"><strong translate lib="web">nextrun</strong></th>
      <th class="w-200" class="text-right"></th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="model in ctrl.models">
      <td class="text-truncate">
        <a style="color: inherit; text-decoration: inherit;" ng-href="#/Workitem/{{model._id}}">
        {{model.name}}</a></td>
      <td class="text-truncate">{{model.state}}</td>
      <td class="text-truncate">{{model.retries}}</td>
      <td class="text-truncate">{{model.priority}}</td>
      <td class="text-truncate" ng-show="ctrl.queue == ''">
        <a style="color: inherit; text-decoration: inherit;" ng-href="#/Workitems/{{model.wiq}}">
          {{model.wiq}}
        </a>
        <!-- <a class="btn" ng-href="#/Workitems/{{model.wiq}}"></a> -->
      </td>
      <td>
        <timesince ng-model="model.lastrun" />
      </td>
      <td>
        <timetoo ng-model="model.nextrun" />
      </td>
      <td>
        <div class="w-200 text-right">
          <a class="btn" ng-href="#/Workitem/{{model._id}}" title="Open and edit this Workitem">
            <em class="fas fa-edit"></em>
          </a>
          <a href ng-click="ctrl.UpdateWorkitem(model, 'retry')" class="btn" ng-disabled="ctrl.loading==true"
            title="Resubmit this Workitem to Workitem queue"><em class="fas fa-undo"></em></a>
          
            <em class="fas fa-trash btn disabled" ng-show="ctrl.loading == true"></em>
          <a href ng-click="ctrl.DeleteWorkitem(model)" class="btn" ng-show="ctrl.loading==false"
            title="Delete Workitem and all associated files, this action cannot be undone"><em
              class="fas fa-trash"></em></a>
        </div>
      </td>
    </tr>
  </tbody>
</table>